<template>
	<view class="container">
		<view class="stats-card" :animation="statsAnim" @click="navigateToClassDetail">
			<view class="stats-header">
				<text class="stats-title">我的班级</text>
				<view class="stats-more">
					
				</view>
			</view>
			<view class="stats-content">
				<view class="stats-item">
					<text class="stats-number">{{classInfo.grade}}</text>
					<text class="stats-label">年级</text>
				</view>
				<view class="stats-item">
					<text class="stats-number">{{classInfo.studentCount}}</text>
					<text class="stats-label">学生数</text>
				</view>

			</view>
			<!-- 点击水波纹效果 -->
			<view class="ripple" v-if="showRipple"></view>
		</view>

		<!-- 功能卡片网格 -->
		<view class="grid-container">
			<!-- 分数管理 -->
			<view class="grid-item" :class="{'animate-in': showCards}" :style="{'animation-delay': '0.1s'}"
				@click="score">
				<view class="grid-icon">
					<uni-icons type="star-filled" size="36" color="#f1ca3d"></uni-icons>
				</view>
				<text class="grid-title">分数管理</text>
				<text class="grid-desc">考试成绩录入与分析</text>
			</view>

			<!-- 表扬榜单 -->
			<view class="grid-item" :class="{'animate-in': showCards}" :style="{'animation-delay': '0.2s'}"
				@click="priaseMain">
				<view class="grid-icon">
					<uni-icons type="medal" size="36" color="#4d50f6"></uni-icons>
				</view>
				<text class="grid-title">表扬榜单</text>
				<text class="grid-desc">优秀学生与进步之星</text>
			</view>

			<!-- 课程纪律 -->
			<view class="grid-item" :class="{'animate-in': showCards}" :style="{'animation-delay': '0.3s'}"
				@click="paizhao">
				<view class="grid-icon">
					<uni-icons type="compose" size="36" color="#10b981"></uni-icons>
				</view>
				<text class="grid-title">课程纪律</text>
				<text class="grid-desc">课堂表现记录</text>
			</view>

			<!-- 作业管理 -->
			<view class="grid-item" :class="{'animate-in': showCards}" :style="{'animation-delay': '0.4s'}"
				@click="homework">
				<view class="grid-icon">
					<uni-icons type="paperclip" size="36" color="#f59e0b"></uni-icons>
				</view>
				<text class="grid-title">作业管理</text>
				<text class="grid-desc">作业布置与检查</text>
			</view>
			
			<view class="grid-item" :class="{'animate-in': showCards}" :style="{'animation-delay': '0.4s'}"
				@click="tools">
				<view class="grid-icon">
					<uni-icons type="settings" size="36" color="#2ccaf5"></uni-icons>
				</view>
				<text class="grid-title">班级工具箱</text>
				<text class="grid-desc">有趣的实用小工具</text>
			</view>
			<view class="grid-item" :class="{'animate-in': showCards}" :style="{'animation-delay': '0.4s'}"
				@click="location">
				<view class="grid-icon">
					<uni-icons type="location" size="36" color="#f35f75"></uni-icons>
				</view>
				<text class="grid-title">安全打卡</text>
				<text class="grid-desc">每日监督孩子的安全打卡</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';
	export default {
		data() {
			return {
				showRipple: false,
				showCards: false,
				statsAnim: {},
				classInfo: {
					grade: '',
					studentCount: 45
				},
				scorePending: 3,
				praisePending: 5,
				disciplinePending: 2,
				homeworkPending: 7
			}
		},
		onLoad(e) {
			this.classInfo.grade = e.grade;
			this.fetchStudents(e.grade)
			// 创建动画实例
			this.animation = uni.createAnimation({
				duration: 800,
				timingFunction: 'ease',
			})

			// 延迟显示卡片动画
			setTimeout(() => {
				this.showCards = true
			}, 300)

			// 执行统计卡片动画
			this.startStatsAnimation()
		},
		methods: {
			location(){
				// uni.navigateTo({
				// 	url:'/pages/location/location?grade='+this.classInfo.grade 
				// })
				
				uni.navigateTo({
					url:'/pages/locationMain/locationMain?grade='+this.classInfo.grade
				})
			},
			tools(){
				uni.navigateTo({
					url:"/pages/tools/tools?grade="+this.classInfo.grade 
				})
			},
			homework(){
				uni.navigateTo({

					url:"/pages/homeWorkMain/homeWorkMain?grade=" + this.classInfo.grade 
				})
			},
			paizhao(){
				uni.navigateTo({
					url:"/pages/paizhao/paizhao?grade="+this.classInfo.grade 
				})
			},
			score(){
				uni.navigateTo({
					url:"/pages/scoreMain/scoreMain?grade="+this.classInfo.grade 
				})
			},
			priaseMain(){
				let that=this;
				uni.navigateTo({
					url:"/pages/praiseMain/praiseMain?grade="+that.classInfo.grade 
				})
			},
			fetchStudents(grade) {
				let that = this;
				uni.request({
					url: globalVariable + "/getStudentsByGrade?grade=" + grade,
					success(res) {
						let info = res.data;
						that.allStudents = info.data;
						that.classInfo.studentCount=that.allStudents.length;
					}
				});
			},
			navigateToClassDetail() {
				uni.navigateTo({
					url:"/pages/detailmy/detailmy?detail="+JSON.stringify(this.allStudents)
				})
			},

			startStatsAnimation() {
				this.animation.opacity(1).translateY(0).step()
				this.statsAnim = this.animation.export()
			},
			navigateTo(type) {
				uni.showToast({
					title: `即将跳转到${this.getTitle(type)}`,
					icon: 'none'
				})
			},
			getTitle(type) {
				const map = {
					'score': '分数管理',
					'praise': '表扬榜单',
					'discipline': '课程纪律',
					'homework': '作业管理'
				}
				return map[type] || ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		min-height: 100vh;
		/* 渐变背景 */
		// background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
		/* 背景图案可以增加质感 */
		background-image:
			radial-gradient(circle at 10% 20%, rgba(255, 79, 10, 0.1) 0%, transparent 20%),
			radial-gradient(circle at 90% 80%, rgba(38, 10, 255, 0.1) 0%, transparent 20%);
	}

	/* 顶部统计卡片 - 毛玻璃效果 */
	.stats-card {
		background: rgba(255, 255, 255, 0.25);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-radius: 24rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		transform: translateY(60rpx);
		opacity: 0;
		position: relative;
		overflow: hidden;
		transition: all 0.2s ease;
		// border: 1px solid rgba(255, 255, 255, 0.3);

		/* 渐变覆盖层增强效果 */
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;

			bottom: 0;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(233, 92, 246, 0.2) 100%);
			z-index: -1;
		}

		&:active {
			transform: translateY(60rpx) scale(0.98);
		}
	}

	/* 功能卡片网格 - 毛玻璃效果 */
	.grid-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
		padding: 20rpx 0;
	}

	.grid-item {
		background: rgba(255, 255, 255, 0.3);
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
		border-radius: 20rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		position: relative;
		opacity: 0;
		transform: translateY(40rpx);
		// border: 1px solid rgba(255, 255, 255, 0.3);

		/* 不同卡片的彩色覆盖层 */
		&:nth-child(1)::before {
			background: rgba(241, 202, 61, 0.15);
		}

		&:nth-child(2)::before {
			background: rgba(77, 80, 246, 0.15);
		}

		&:nth-child(3)::before {
			background: rgba(16, 185, 129, 0.15);
		}

		&:nth-child(4)::before {
			background: rgba(245, 158, 11, 0.15);
		}
		&:nth-child(5)::before {
			background: rgba(47, 186, 245, 0.1);
		}

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 20rpx;
			z-index: -1;
		}
	}

	/* 其他原有样式保持不变... */
	.stats-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.stats-title {
		color: rgba(0, 0, 0, 0.9);
		font-size: 36rpx;
		font-weight: 600;
	}

	.stats-more {
		display: flex;
		align-items: center;

		text {
			color: rgba(0, 0, 0, 0.7);
			font-size: 24rpx;
			margin-right: 10rpx;
		}
	}

	.stats-content {
		display: flex;
		justify-content: space-between;
	}

	.stats-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.stats-number {
		color: #000000;
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}

	.stats-label {
		color: rgba(0, 0, 0, 0.7);
		font-size: 24rpx;
	}

	/* 水波纹效果 */
	.ripple {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 10rpx;
		height: 10rpx;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 50%;
		transform: translate(-50%, -50%) scale(1);
		animation: rippleEffect 0.6s ease-out;
		pointer-events: none;
	}

	@keyframes rippleEffect {
		to {
			transform: translate(-50%, -50%) scale(20);
			opacity: 0;
		}
	}

	.grid-item.animate-in {
		animation: slideUp 0.6s ease forwards;
	}

	.grid-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}

	.grid-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1f2937;
		margin-bottom: 8rpx;
	}

	.grid-desc {
		font-size: 24rpx;
		color: #4b5563;
		text-align: center;
	}

	.grid-badge {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background: #ff4d4f;
		color: white;
		font-size: 22rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		animation: pulse 1.5s infinite;
	}

	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(40rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.grid-item:active {
		transform: scale(0.98) !important;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
</style>